<template>
	<view class="experience">
		<view class="head_box" style="height: 150rpx;background: #fff;" :style="{opacity: scrollTop}"></view>
		<Tabbar ref="tabbar"></Tabbar>
		<view class="menu">
			<view class="nav">
				<image src="../../static/images/index/xd_icon1.png" mode="widthFix" class="icon"></image>
				<view class="text">全部话题</view>
			</view>
			<view class="nav">
				<image src="../../static/images/index/xd_icon2.png" mode="widthFix" class="icon"></image>
				<view class="text">厨具</view>
			</view>
			<view class="nav">
				<image src="../../static/images/index/xd_icon3.png" mode="widthFix" class="icon"></image>
				<view class="text">服装</view>
			</view>
			<view class="nav">
				<image src="../../static/images/index/xd_icon4.png" mode="widthFix" class="icon"></image>
				<view class="text">配件</view>
			</view>
		</view>
		<view class="hot">
			<view class="title">
				<view class="label">
					热门话题
				</view>
				<view class="more">
					查看更多 >
				</view>
			</view>
			<view class="cont">
				<view class="slides">
					<image src="../../static/images/index/xd_icon3.png" mode="widthFix" class="img"></image>
					<view>
						<view class="label">
							<image src="../../static/images/index/xd_icon5.png" mode="widthFix" class="icon"></image>给春天的五个提案
						</view>
						<view class="val">
							974人已浏览
						</view>
					</view>
				</view>
				<view class="slides">
					<image src="../../static/images/index/xd_icon3.png" mode="widthFix" class="img"></image>
					<view>
						<view class="label">
							<image src="../../static/images/index/xd_icon5.png" mode="widthFix" class="icon"></image>给春天的五个提案
						</view>
						<view class="val">
							974人已浏览
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="topic">
			<view class="title">
				<image src="../../static/images/index/xd_icon1.png" mode="widthFix" class="icon"></image>
				<view>
					<view class="label">
						餐厨话题
					</view>
					<view class="val">
						2012-03-12 11:05
					</view>
				</view>
			</view>
			<view class="h1">
				<image src="../../static/images/index/xd_icon5.png" mode="widthFix" class="icon"></image>给春天的五个提案
			</view>
			<view class="h2">
				去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一去年夏天，品牌中心的设计师路过园区里水池的时候和同事玩笑道：“这儿就是少了几条锦鲤。”商品组灵机一
			</view>
			<view class="h3" @click="goDetail">
				查看全文
			</view>
			<view class="img">
				<image src="../../static/images/index/invite_bg1.png" mode="widthFix"></image>
			</view>
			<view class="handle">
				<view class="nav">
					<image src="../../static/images/index/xd_icon6.png" mode="widthFix" class="icon"></image>收藏 20
				</view>
				<view class="nav">
					<image src="../../static/images/index/xd_icon7.png" mode="widthFix" class="icon"></image>浏览 20
				</view>
				<view class="nav">
					<image src="../../static/images/index/xd_icon8.png" mode="widthFix" class="icon"></image>评论 20
				</view>
			</view>
		</view>
		<!-- #ifdef MP || H5-->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	import Tabbar from '@/components/tabbar/tab.vue'
	export default {
		name: '',
		components: {
			Tabbar
		},
		props: {

		},
		data() {
			return {
				scrollTop: 0
			};
		},
		computed: {

		},
		watch: {

		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			let scrollTop = 0;
			if (e.scrollTop < 101 && e.scrollTop >= 0) {
				this.scrollTop = e.scrollTop/100
			} else {
				this.scrollTop = 1
			}
		},
		onLoad() {

		},
		onShow() {
			this.$nextTick(() => {
				app.globalData.tabName = '心得';
				this.$refs.tabbar.initInfo();
			})
		},
		methods: {
			pay() {
				uni.navigateTo({
					url: '../openOut/openOut'
				})
			},
			// 查看话题详情
			goDetail() {
				uni.navigateTo({
					url: './detail/detail'
				})
			}
		},
	};
</script>

<style lang="scss">
	.experience {
		.menu {
			padding: 40rpx 30rpx;
			background: #f7f7f7;
			display: flex;
			.nav {
				flex: 1;
				font-size: 26rpx;
				color: #111111;
				text-align: center;
				.icon {
					width: 84rpx;
					height: 84rpx;
				}
			}
		}
		.hot {
			width: 100%;
			padding: 0 30rpx 20rpx;
			background: #fff;
			.title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label {
					font-size: 30rpx;
					font-weight: bold;
					color: #111111;
				}
				.more {
					font-size: 22rpx;
					color: #111111;
				}
			}
			.cont {
				overflow-x: auto;
				white-space: nowrap;
				.slides {
					width: 364rpx;
					height: 150rpx;
					background: #F7F7F8;
					border-radius: 16rpx;
					padding: 0 40rpx 0 165rpx;
					position: relative;
					display: inline-flex;
					align-items: center;
					white-space: normal;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					.img {
						width: 150rpx;
						height: 150rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
					.label {
						font-size: 26rpx;
						font-weight: bold;
						color: #111111;
						.icon {
							display: inline-block;
							width: 28rpx;
							height: 28rpx;
							vertical-align: middle;
							margin: -8rpx 10rpx 0 0;
						}
					}
					.val {
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
		.topic {
			width: 100%;
			padding: 0 30rpx 30rpx;
			background: #fff;
			margin-top: 20rpx;
			.title {
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.icon {
					width: 84rpx;
					height: 84rpx;
					margin-right: 20rpx;
				}
				.label {
					font-size: 26rpx;
					font-weight: bold;
					color: #111111;
				}
				.val {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}
			.h1 {
				font-size: 28rpx;
				font-weight: bold;
				color: #111111;
				.icon {
					width: 28rpx;
					height: 28rpx;
					vertical-align: middle;
					margin: -4rpx 10rpx 0 0;
				}
			}
			.h2 {
				width: 100%;
				height: 70rpx;
				font-size: 26rpx;
				color: #000000;
				display: -webkit-box;
				/* 弹性盒子元素垂直排列 */
				-webkit-box-orient: vertical;
				/* 控制要显示的行数 */
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 10rpx;
			}
			.h3 {
				font-size: 26rpx;
				font-weight: bold;
				color: #F5A649;
				margin-top: 10rpx;
			}
			.img {
				width: 100%;
				height: auto;
				margin-top: 30rpx;
				image {
					width: 100%;
				}
			}
			.handle {
				display: flex;
				margin-top: 25rpx;
				.nav {
					flex: 1;
					text-align: center;
					font-size: 26rpx;
					color: #000000;
					.icon {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin: -4rpx 10rpx 0 0;
					}
				}
			}
		}
	}
</style>
